<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./css/bootstrap.css">
		<script src="js/jquery-3.6.4.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
		<link rel="stylesheet" href="./css/in.css">
		<title>Our mission</title>
		<style>
			.btn-outline-purple {
			  color: #2c1438;
			  border-color: #2c1438;
			}
			
			.btn-outline-purple:hover {
			  color: #fff;
			  background-color: #e47bd8;
			  border-color: #e47bd8;
			}
			.btn-outline-white {
			  color: #faebd7;
			  border-color: #faebd7;
			}
			
			.btn-outline-white:hover {
			  color: #2c1438;
			  background-color: #faebd7;
			  border-color: #faebd7;
			  
			}
			
		</style>
	</head>
	<body>
		<div class="navbar sticky-top d-flex navbar-expand-md justify-content-end navbar-light"style="background-color: rgba(228, 123, 216, 0.7);">
			<button class="navbar-toggler" data-toggle="collapse" data-target="#top"><span class="navbar-toggler-icon"></span></button>
			<ul class=" nav py-2  collapse navbar-collapse" id="top">
				<li class="nav-item">
					<a href="./Home.html" class="text-dark text-decoration-none font-weight-bold nav-link">Home</a>
				</li>
				<li class="nav-item dropdown position-relative">
					<a href="#" data-toggle="dropdown" class="text-dark text-decoration-none font-weight-bold nav-link dropdown-toggle">Products</a>
					<ul class="dropdown-menu position-absolute" style="background: #e47bd8;">
						<li class="dropdown-header font-weight-bold text-white">
							title
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item font-weight-bold">
							select
						</li>
					</ul>
				</li>
				<li class="nav-item">
					<a href="./Blog.html" class="text-dark text-decoration-none font-weight-bold nav-link">Bolg</a>
				</li>
				<li class="nav-item">
					<a href="./Our_mission.html" class="text-white text-decoration-none font-weight-bold nav-link">Our mission</a>
				</li>
				<li class="nav-item">
					<a href="./Price.html" class="text-dark text-decoration-none font-weight-bold nav-link">Purchase</a>
				</li>
			</ul>
		</div>
		
		<div class="container-fluid d-flex flex-column align-items-center justify-content-center py-5" style="background-color:#3f2a4b;">
			<div class="carousel slide" id="carousel" data-ride="carousel" data-interval="1500" style=" margin-bottom: 150px;">
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="./img/j1.jpg" alt="" class="vw-100 img-fluid">
					</div>
					<div class="carousel-item">
						<img src="./img/j2.jpg" alt="" class="vw-100 img-fluid">
					</div>
					<div class="carousel-item">
						<img src="./img/j3.jpg" alt="" class="vw-100 img-fluid">
					</div>
					<div class="carousel-item">
						<img src="./img/j4.jpg" alt="" class="vw-100 img-fluid">
					</div>
					<div class="carousel-item">
						<img src="./img/j5.jpg" alt="" class="vw-100 img-fluid">
					</div>
				</div>
				<ul class="carousel-indicators">
					<li data-slide-to="0" data-target="#carousel" class="active"></li>
					<li data-slide-to="1" data-target="#carousel"></li>
					<li data-slide-to="2" data-target="#carousel"></li>
					<li data-slide-to="3" data-target="#carousel"></li>
					<li data-slide-to="4" data-target="#carousel"></li>
				</ul>
				<a href="#carousel" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span></a>
				<a href="#carousel" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
			</div>
			<div class="card w-50 position-relative my-5">
				<div class="card-body" style="background: #fdf2ec;">
					
					<div class="row position-relative">
						<div class="card-text col-8">
							<p class="card-text font-weight-bold">
								“Toggl Track increased our profitability by at least 20%
								We found out where the team was spending too much
								time on clients. Toggl Track gave us the ability to
								restrategize, find out what's wrong, and fix it.”
							</p>
							<p class="card-title font-weight-light">
								—— Sweat+Co on Toggl Track's Premium plan. <strong class="font-weight-bold">Read the case study</strong>
							</p>
						</div>
						<img src="./img/p.webp" class="card-img img-fluid d-none d-md-block position-absolute" alt="" style="transform: rotate(20deg);width: 300px;
						height: 220px;left: calc(100% - 150px); bottom:30%;">
					</div>
					
				</div>
				<div class="card-footer d-flex justify-content-between align-items-center" style="background: #fbe5d8;">
					<p class="card-text font-weight-bold my-auto">
						Toggl Track is trusted by Sweat+Co and 70,000+ teams
					</p>
					<button class="btn btn-outline-purple rounded-pill font-weight-bold px-4">
						Try Toggl Track
					</button>
				</div>
				
			</div>
			
			<img src="./img/2.png" alt="" class="my-5">
			
			<ul class="list-group w-100 pl-5 list-group-flush my-5" style="color: #faebd7;">
				<h1 class="text-center" style="color: #e47bd8;">
					FAQs
				</h1>
				<li class="list-group-item accordion my-2" style="background-color: #3f2a4b;">
					<span class="dropdown-toggle" data-toggle="collapse" data-target="#list1">
						ls Toggl Track free for an unlimited number of users?
					</span>
					<div class="collapse bg-info pl-5 font-weight-bold" id="list1">
						this is try toggl track
					</div>
				</li>
				<li class="list-group-item accordion my-2" style="background-color: #3f2a4b;">
					<span class="dropdown-toggle" data-toggle="collapse" data-target="#list2">
						How is the subscription fee calculated for paid plans?
					</span>
					<div class="collapse bg-info pl-5 font-weight-bold" id="list2">
						this is try toggl track
					</div>
				</li>
				<li class="list-group-item accordion my-2" style="background-color: #3f2a4b;">
					<span class="dropdown-toggle" data-toggle="collapse" data-target="#list3">
						You mentioned that Toggl Track is free for up to 5 users. lf I'm on a paid plan, do l only
						need to pay for the 6th user?
					</span>
					<div class="collapse bg-info pl-5 font-weight-bold" id="list3">
						this is try toggl track
					</div>
				</li>
				<li class="list-group-item accordion my-2" style="background-color: #3f2a4b;">
					<span class="dropdown-toggle" data-toggle="collapse" data-target="#list4">
						Does Toggl Track offer discounts?
					</span>
					<div class="collapse bg-info pl-5 font-weight-bold" id="list4">
						this is try toggl track
					</div>
				</li>
				<li class="list-group-item accordion my-2" style="background-color: #3f2a4b;">
					<span class="dropdown-toggle" data-toggle="collapse" data-target="#list5">
						lt keeps taking me to a page where it says l'm signing up for a trial of Premium. I'd just like
						to sign up for a Free plan.
					</span>
					<div class="collapse bg-info pl-5 font-weight-bold" id="list5">
						this is try toggl track
					</div>
				</li>
				<li class="list-group-item accordion my-2" style="background-color: #3f2a4b;">
					<span class="dropdown-toggle" data-toggle="collapse" data-target="#list6">
						lf l sign up for a Free plan but add 6 users to my Workspace during my free Premium trial
						what will happen to the 6th user once the 3o days are up?
					</span>
					<div class="collapse bg-info pl-5 font-weight-bold" id="list6">
						this is try toggl track
					</div>
				</li>
				
				<li class="list-group-item accordion my-2" style="background-color: #3f2a4b;">
					<span class="dropdown-toggle" data-toggle="collapse" data-target="#list7">
						if I use your Premium features during the trial, what happens to all the data related to paid
						features (Tasks, Billable Rates, etc,) once my Workspace downgrades to the Free plan?
					</span>
					<div class="collapse bg-info pl-5 font-weight-bold" id="list7">
						this is try toggl track
					</div>
				</li>
				
			</ul>
			<div class="footer vw-100 row mx-auto">
				<ul class="list-unstyled col-6 col-lg-3 my-5">
					<h4 class="text-secondary">
						TOGGL GLOBAL
					</h4>
					<li class="my-3">
						<a href="#" class="text-white">
							Blog
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Our Mission
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Working at Toggl
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Legal Terms
						</a>
					</li>
				</ul>
				
				<ul class="list-unstyled col-6 col-lg-3 my-5">
					<h4 class="text-secondary">
						PRODUCT
					</h4>
					<li class="my-3">
						<a href="#" class="text-white">
							Features
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Pricing
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Integrations
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							API
						</a>
					</li>
				</ul>
				
				<ul class="list-unstyled col-6 col-lg-3 my-5">
					<h4 class="text-secondary">
						USE CASES
					</h4>
					<li class="my-3">
						<a href="#" class="text-white">
							Billing and Invoicing
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Employee Time Tracking
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Project Budgeting
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Reporting
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Payroll
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Work Hours Tracker
						</a>
					</li>
				</ul>
				
				<ul class="list-unstyled col-6 col-lg-3 my-5">
					<h4 class="text-secondary">
						Help
					</h4>
					<li class="my-3">
						<a href="#" class="text-white">
							Support & Knowledge Base
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Request A Demo
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Contact Us
						</a>
					</li>
					<li class="my-3">
						<a href="#" class="text-white">
							Legal Terms
						</a>
					</li>
				</ul>
				
				
				
			</div>
		</div>
		
	</body>
</html>